<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
    <div v-for="item in data.list" :key="item">{{ item }}</div>
    <br />
    <div v-for="item in li" :key="item">{{ item }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src

export default defineComponent({
  name: "HomeView",
  components: {
    HelloWorld,
  },
  setup(props, context) {
    console.log(props, context);
    let data = reactive({
      list: [1, 3, 2, 4, 6, 5],
    });

    data.list[7] = 7;
    delete data.list[2];
    data.list[7] = 8;
    data.list[1] = 8;

    let list2 = [1, 3, 2, 4, 6, 5];
    let li = ref(list2);
    li.value[7] = 7;
    delete li.value[2];
    li.value[7] = 8;
    li.value[1] = 8;
    list2[0] = 9;

    return {
      data,
      li,
    };
  },
});
</script>
